<!doctype html>
<html>
<head>
 <title>HTML5-now: time element</title>
 <script src="../base2-legacy.js"></script><!-- support really old browsers -->
 <script src="../html5-now.js"></script>
 <script src="colorizer.js"></script>
 <link rel="stylesheet" type="text/css" href="examples.css">
</head>
<body>
 <h1>HTML5-now: <code>time</code> element</h1>
 
 <p>A <code>time</code> element with descriptive text content:</p>

 <div class="example">
  <time datetime="2009-09-27" pubdate>The day that I wrote this example.</time>
 </div>
 
 <p>This is the markup for the above example:</p>
 
<pre class="html">
&lt;time datetime="2009-09-27"&gt;The day that I wrote this example.&lt;/time&gt;
</pre>

 <p>If a <code>time</code> element has no text content then it is created
  using the <code>datetime</code> attribute according to the locale. The
  locale-specific text is generated by JavaScript&#8217;s Date methods and
  will vary across browsers:</p>

 <div class="example">
  <time datetime="2009-09-27" title="The day that I wrote this example"><!-- no text --></time>
 </div>

 <p>This is the markup for the above example:</p>

<pre class="html">
&lt;time datetime="2009-09-27" title="The day that I wrote this example"&gt;&lt;!-- no text --&gt;&lt;/time&gt;
</pre>

 <p>Here is the same example except that there is now a time component:</p>

 <div class="example">
  <time datetime="2009-09-27T09:16" title="The time that I wrote this example"></time>
 </div>

 <p>This is the markup for the above example:</p>

<pre class="html">
&lt;time datetime="2009-09-27T09:16" title="The time that I wrote this example"&gt;&lt;/time&gt;
</pre>

 <p>The <code>time</code> element has a <code>valueAsDate</code> DOM property.
  This reflects the <code>datetime</code> attribute, or if it is missing,
  the parsed text content. In the example below, the <code>datetime</code>
  attribute is missing. Click on the element to reveal its <code>valueAsDate</code>
  property:</p>

 <div class="example">
  <time onclick="alert(html5.get(this,'valueAsDate'))">2009-09-27</time>
 </div>

 <p>This is the markup for the above example:</p>

<pre class="html">
&lt;time onclick="alert(html5.get(this,'valueAsDate'))"&gt;2009-09-27&lt;/time&gt;
</pre>
</body>
</html>
